<template>
  <div class="weather">
    <!-- 现在 -->
    <div class="now hover-dark">
      <div class="weather-title"><dateLine></dateLine></div>

      <div class="weather-body">
        <svg class="icon" aria-hidden="true" style="width: 70px;height: 70px;margin-left: 10px;">
          <use :xlink:href="weather.now.iconValue"></use>
        </svg>
        <span class="now-temp">{{weather.now.temp}}</span>
        <div  class="now-temp-extra">
          <span style="font-size: 25px;">°C</span>
          <span style="">{{weather.now.text}}</span>
        </div>
      </div>

      <div class="weather-footer">
        <span>未来两小时: {{weather.hourly.text}}</span>
      </div>
    </div>

    <!-- 今天 -->
    <div class="today hover-dark">
      <div class="weather-title">今天</div>
      <div class="weather-body">
        <div>
          <svg class="icon" aria-hidden="true"><use :xlink:href="weather.daily[0].iconValueDay"></use></svg>
          <span>{{weather.daily[0].tempMin}}°~{{weather.daily[0].tempMax}}°</span>
        </div>
      </div>
      <div class="weather-footer">
        <span class="weather-footer-small">{{weather.daily[0].textDay}}</span>
      </div>
    </div>

    <!-- 明天 -->
    <div class="tomorrow hover-dark">
      <div class="weather-title">明天</div>
      <div class="weather-body">
        <div>
          <svg class="icon" aria-hidden="true"><use :xlink:href="weather.daily[1].iconValueDay"></use></svg>
          <span>{{weather.daily[1].tempMin}}°~{{weather.daily[1].tempMax}}°</span>
        </div>
      </div>
      <div class="weather-footer">
        <span class="weather-footer-small">{{weather.daily[1].textDay}}</span>
      </div>
    </div>

    <!-- 后天 -->
    <div class="dayaftert hover-dark">
      <div class="weather-title">后天</div>
      <div class="weather-body">
        <div>
          <svg class="icon" aria-hidden="true" ><use :xlink:href="weather.daily[2].iconValueDay"></use></svg>
          <span>{{weather.daily[2].tempMin}}°~{{weather.daily[2].tempMax}}°</span>
        </div>
      </div>
      <div class="weather-footer">
        <span class="weather-footer-small">{{weather.daily[2].textDay}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {getAll} from "../api/weather"
  import dateLine from "./dateLine"

  export default {
    name: "weather",
    data () {
      return {
        weather: {
          now    : {},
          hourly : {},
          daily  : [
            { iconValueDay: '', tempMin: '', tempMax: '', textDay: '' },
            { iconValueDay: '', tempMin: '', tempMax: '', textDay: '' },
            { iconValueDay: '', tempMin: '', tempMax: '', textDay: '' }
          ]
        },
      }
    },
    computed: {
      isLogin  () {return this.$store.state.config.login.loginState === this.$GLOBAL.LOGIN.STATE.SUCCESS},
    },
    methods: {
      findWeather () {
        getAll().then(resp => {
          let data = resp.data
          this.weather.now    = data.now
          this.weather.hourly = data.hourly[0]
          this.weather.daily  = data.daily
        })
      }
    },
    mounted() {
      if (this.isLogin) {
        this.findWeather()
      }
    },
    components: {
      dateLine
    }
  }
</script>

<style scoped lang="scss">
  .weather {
    @include flex(row);
    @include fontBase(15px,00);
    @include themeColor(#FFFFFF,#d5d5d5);
    @include themeBgColor(#fbfbfb,none);
    width: 98%;
    min-height: 200px;
    max-height: 200px;
    border-radius: 10px;
    transition: box-shadow 0.5s;

    .weather-title {
      @include flex(row,center,center);
      @include boxBase(100%,15%);
    }

    .weather-body {
      @include flex(row,center,center);
      @include boxBase(100%,70%);
    }

    .weather-footer {
      @include flex(row,center,center);
      @include boxBase(100%,15%);
      &-small {
        @include fontBase(11px,500);
        margin-top: 10px;
      }
    }

    .now {
      @include themeBgColor($theme-color-light,$theme-color-night-dark);
      width: 40%;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      transition: box-shadow 0.3s,width 0.2s,height 0.5s;
      &-temp {
        @include flex(row,center,center);
        @include fontBase(65px,900,Lato);
        height: 100%;
        margin-left: 20px;
      }
      &-temp-extra {
        @include flex(column,center);
        @include fontBase(16px,700,Lato);
        height: 100%;
        min-width: 70px;
        margin-left: 10px;
        text-align: left;
      }
      &:hover {
        z-index: 15;
      }
    }

    .today, .tomorrow, .dayaftert {
      width: 20%;
      transition: box-shadow 0.3s,width 0.2s,height 0.2s;
      &:hover {
        z-index: 15;
        width: 25%;
      }
      .weather-body {
        div {
          @include flex(column,center,center);
          svg {
            @include boxBase(35px,35px);
          }
          span {
            @include fontBase(15px,700,Lato);
            margin-top: 10px;
          }
        }
      }
    }

    .today {
      @include themeBgColor($theme-color-light-7,$theme-color-night-dark-8);
    }

    .tomorrow {
      @include themeBgColor($theme-color-light-5,$theme-color-night-dark-7);
    }

    .dayaftert {
      @include themeBgColor($theme-color-light-4,$theme-color-night-dark-6);
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
    }
  }

  .hover-dark {
    &:hover {
      @include themeShadow(0 2px 14px 1px rgba(0,0,0,.5),0 2px 14px 3px rgba(0,0,0,0.7));
    }
  }
</style>
